<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<mat-card class="api-creation-v4__step">
  <mat-card-content>
    <div class="api-creation-v4__step__header">
      <div class="api-creation-v4__step__header__subtitle">Review your API configuration</div>
      <p class="api-creation-v4__step__header__paragraph-light">Verify all the information is correct before saving</p>
    </div>
    <div class="step-5-summary__body">
      <!--    Step 1 -->
      <div id="step-1" class="step-5-summary__step">
        <div class="mat-h3">API details</div>
        <div class="step-5-summary__step__body">
          <div class="step-5-summary__step__info">
            <div class="step-5-summary__step__info__row">
              <span class="step-5-summary__step__info__key">API name:</span>
              <span class="step-5-summary__step__info__value">{{ currentStepPayload.name }}</span>
            </div>
            <div class="step-5-summary__step__info__row">
              <span class="step-5-summary__step__info__key">Version:</span>
              <span class="step-5-summary__step__info__value">{{ currentStepPayload.version }}</span>
            </div>
            <div class="step-5-summary__step__info__row" *ngIf="currentStepPayload.description">
              <span class="step-5-summary__step__info__key">Description:</span>
              <span class="step-5-summary__step__info__value">
                {{ currentStepPayload.description }}
              </span>
            </div>
          </div>
          <div>
            <button mat-stroked-button (click)="onChangeStepInfo('API details')">Change</button>
          </div>
        </div>
      </div>
      <!--    Step 2 -->
      <div id="step-2" class="step-5-summary__step">
        <div class="mat-h3">Entrypoints</div>
        <div class="step-5-summary__step__body">
          <div class="step-5-summary__step__info">
            <div class="step-5-summary__step__info__row" *ngIf="paths?.length > 0">
              <span class="step-5-summary__step__info__key">Path:</span>
              <span class="step-5-summary__step__info__value">{{ paths.join(', ') }}</span>
            </div>
            <div class="step-5-summary__step__info__row" *ngIf="hosts?.length > 0">
              <span class="step-5-summary__step__info__key">Host:</span>
              <span class="step-5-summary__step__info__value">{{ hosts.join(', ') }}</span>
            </div>
            <div class="step-5-summary__step__info__row">
              <span class="step-5-summary__step__info__key">Type:</span>
              <span class="gio-badge-accent" *ngFor="let listenerType of listenerTypes">{{ listenerType }}</span>
            </div>
            <div class="step-5-summary__step__info__row">
              <span class="step-5-summary__step__info__key">Entrypoints:</span>
              <span class="gio-badge-warning api-creation-v4__badge" *ngIf="!entrypointsDeployable">Not deployed</span>
              <div class="step-5-summary__badge-list">
                <ng-container *ngFor="let entrypoint of currentStepPayload.selectedEntrypoints">
                  <span class="gio-badge-accent"
                    ><mat-icon class="api-creation-v4__icon" [svgIcon]="entrypoint.icon"></mat-icon> {{ entrypoint.name }}</span
                  >
                </ng-container>
              </div>
            </div>
          </div>
          <div>
            <button mat-stroked-button (click)="onChangeStepInfo('Entrypoints')">Change</button>
          </div>
        </div>
      </div>
      <!--    Step 3 -->
      <div id="step-3" class="step-5-summary__step">
        <div class="mat-h3">Endpoints</div>
        <div class="step-5-summary__step__body">
          <div class="step-5-summary__step__info">
            <div class="step-5-summary__step__info__row">
              <span class="step-5-summary__step__info__key">Endpoints:</span>
              <span class="gio-badge-warning api-creation-v4__badge" *ngIf="!endpointsDeployable">Not deployed</span>
              <div class="step-5-summary__badge-list">
                <ng-container *ngFor="let endpoint of currentStepPayload.selectedEndpoints">
                  <span class="gio-badge-accent"
                    ><mat-icon class="api-creation-v4__icon" [svgIcon]="endpoint.icon"></mat-icon> {{ endpoint.name }}
                  </span>
                </ng-container>
              </div>
            </div>
          </div>
          <div>
            <button mat-stroked-button (click)="onChangeStepInfo('Endpoints')">Change</button>
          </div>
        </div>
      </div>
      <!--    Step 4 -->
      <div id="step-4" class="step-5-summary__step">
        <div class="mat-h3">Security</div>
        <div class="step-5-summary__step__body">
          <div class="step-5-summary__step__info">
            <div class="step-5-summary__step__info__security__content" *ngIf="currentStepPayload.plans?.length > 0; else elseBlock">
              <div class="step-5-summary__step__info__security__content__card" *ngFor="let plan of currentStepPayload.plans">
                <div class="step-5-summary__step__info__security__content__card__title">
                  <span class="mat-body-strong">{{ plan.name }}</span
                  ><span class="gio-badge-neutral">{{ plan.security?.type || plan.mode }}</span>
                </div>
                <div class="step-5-summary__step__info__security__content__card__content">
                  <span>Entrypoints type: http</span>
                </div>
              </div>
            </div>
            <ng-template #elseBlock> No plans are selected. </ng-template>
          </div>
          <div>
            <button mat-stroked-button (click)="onChangeStepInfo('Security')">Change</button>
          </div>
        </div>
      </div>
      <div *ngIf="shouldUpgrade">
        <gio-license-banner
          [license]="license$ | async"
          [isOEM]="isOEM$ | async"
          (onRequestUpgrade)="onRequestUpgrade()"
        ></gio-license-banner>
      </div>
    </div>
    <div class="step-5-summary__footer">
      <div class="step-5-summary__footer__actions">
        <button mat-stroked-button type="button" (click)="createApi({ deploy: false, askForReview: false })">
          Save API<mat-icon
            svgIcon="gio:info"
            class="step-5-summary__footer__button-icon"
            matTooltip="Your API definition will be saved, but not deployed to the gateway."
          ></mat-icon>
        </button>
        <button
          *ngIf="!hasReviewEnabled"
          data-testid="deploy_api_button"
          color="primary"
          mat-flat-button
          type="button"
          [disabled]="shouldUpgrade"
          (click)="createApi({ deploy: true, askForReview: false })"
        >
          Save & Deploy API<mat-icon
            svgIcon="gio:info"
            class="step-5-summary__footer__button-icon"
            [matTooltip]="
              deployable
                ? 'Your API will be deployed to the gateway.'
                : 'You cannot deploy an API with endpoints or entrypoints not deployed.'
            "
          ></mat-icon>
        </button>
        <button
          *ngIf="hasReviewEnabled"
          data-testid="create_and_ask_review_api_button"
          color="primary"
          mat-flat-button
          type="button"
          (click)="createApi({ deploy: false, askForReview: true })"
        >
          Save API & Ask for a review<mat-icon
            svgIcon="gio:info"
            matTooltip="Your API definition will be saved and asked for review."
          ></mat-icon>
        </button>
      </div>
      <span class="step-5-summary__footer__message">Your API will be saved, but not published to the portal</span>
    </div>
  </mat-card-content>
</mat-card>
